{extend name="main"}
{block name="body"}
<div class="bg-white mb-3">
    <el-form :model="search" @submit.native.prevent="submitForm" ref="search" label-position="right" class="flex py-3">


        <el-form-item label="群名称" prop="title" class="flex mb-0 pl-3">
            <el-input v-model="search.title" placeholder="请输入你想搜索的关键词"></el-input>
        </el-form-item>

        <el-form-item class="flex mb-0 pl-3">
            <el-button type="primary" @click="initHtml">查询</el-button>
            <el-button @click="resetForm('search')">重置</el-button>
            <el-button @click="synchronous(false)">同步企微</el-button>
        </el-form-item>
    </el-form>
</div>
<div class="bg-white p-3">

    <div class="table-responsive">
        <el-table
                ref="tableList"
                :data="tableData"
                v-loading="search.ajax"
                style="width: 100%;"
                header-cell-class-name="table-header-DDE6FB"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="id"
                    label="ID"
                    width="60">
            </el-table-column>
            <el-table-column
                    prop="name"
                    width="320"
                    label="群名称">
            </el-table-column>
            <el-table-column
                    prop="owner"
                    label="群主"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="all_member"
                    label="群人数"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="today_join"
                    label="今日入群"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="today_quit"
                    label="今日退群"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="sort"
                    label="注册用户数"
                    width="150">
            </el-table-column>
            <el-table-column width="180" label="创建时间">
                <template slot-scope="scope">
                    <div class="small">
                        <div>{{ scope.row.create_time }}</div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                    label="操作">
                <template slot-scope="scope">
                    <div v-if="!scope.row.delete_time">
                        <el-button
                                type="primary"
                                plain
                                round
                                size="minism"
                                @click="synchronous(scope.row.id)">
                            同步
                        </el-button>
                        <el-button
                                type="primary"
                                plain
                                round
                                size="minism"
                                @click="window.open('/talent/detail/'+scope.row.id)">
                            详情
                        </el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="table-responsive py-3 text-center">
        <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="search.page"
                :page-sizes="[10,50,100,200]"
                :page-size="search.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="search.total">
        </el-pagination>
    </div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
    var vm=new Vue({
        el:'#app',
        data:{
            view:XYBase.view,

            labelPosition:'right',

            defaultProps: {
                value: 'id',
                label: 'title',
                children: 'data'
            },

            search:{
                title:'',
                // status:'all',
                ajax:false,
                page:1,
                total:0,
                pageSize:10
            },
            tableData:[],
        },
        watch:{
            view:XYBase.viewWatch,
        },
        created(){
            XYBase.created(this);
        },
        methods: {

            handleSelectionChange(val) {
                this.multipleSelection = val;
            },

            resetForm:function(formName) {
                this.$refs[formName].resetFields();
            },
            handleSizeChange(val) {
                this.search.page=1;
                this.search.pageSize=val;
                this.initHtml();
            },
            handleCurrentChange(val) {
                this.search.page=val;
                this.initHtml();
            },
            //同步企业微信
            synchronous(isOne){
                var _this=this;
                if (_this.tableData.length<=0){
                        this.$alert('首次加载将会耗费较长得时间，请勿刷新页面', '同步提示', {
                            confirmButtonText: '确定',
                        });
                }
                let ids=[];
                if (isOne==false){
                    if (_this.multipleSelection !=undefined){
                        ids= this.multipleSelection.map((item)=>item.id)
                    }
                }else {
                    ids.push(isOne);
                }
                // console.log(ids);
                // return;
                _this.search.ajax=true;
                $.ajax({
                    url:'/talent/synchronousCustomer',
                    type:'post',
                    data: {ids:ids},
                    dataType:'json',
                    error:function(err){
                        _this.search.ajax=false;
                        XYBase.error(XYBase.config.system_network_error);
                    },
                    success:function(ret){
                        _this.search.ajax=false;
                        if (ret) {
                            if (ret.code === 0) {
                                _this.initHtml()
                                XYBase.success("同步成功");

                            }else{
                                XYBase.msg(ret.msg);
                            }
                        }else{
                            XYBase.error(XYBase.config.system_network_error);
                        }
                    }
                });


            },
            initHtml() {
                var _this=this;
                _this.search.ajax=true;
                $.ajax({
                    url:'',
                    type:'get',
                    data:_this.search,
                    dataType:'json',
                    error:function(err){
                        _this.search.ajax=false;
                        XYBase.error(XYBase.config.system_network_error);
                    },
                    success:function(ret){
                        _this.search.ajax=false;
                        if (ret) {
                            if (ret.code === 0) {
                                _this.search.total=ret.data.total;
                                _this.tableData=ret.data.data;
                            }else{
                                XYBase.msg(ret.msg);
                            }
                        }else{
                            XYBase.error(XYBase.config.system_network_error);
                        }
                    }
                });
            }
        }
    });
    $(function(){
        vm.initHtml();
        reloadWindowSize();
        $(window).resize(function(){
            reloadWindowSize();
        });
    });
    function reloadWindowSize (argument) {
        var winW=$(window).width();
        if(winW <= 576){
            vm.labelPosition='top';
        }else{
            vm.labelPosition='right';
        }
    }
</script>
{/block}